import React, { useImperativeHandle, forwardRef } from "react"
import { Button, Row, Col, Form, ConfigProvider } from "antd"
import classNames from "classnames"
const Search = ({ children, onConfirm, onClear }, ref) => {
  const [form] = Form.useForm()
  useImperativeHandle(
    ref,
    () => ({
      form
    }),
    [form]
  )
  return (
    <ConfigProvider
      theme={{
        token: {
          screenXLMin: 1599, // XL 最小值
          screenXL: 1600, // XL 断点
          screenXLMax: 1699, // XL 最大值 (16寸显示器)
          screenXXL: 2552, // XXL 断点 (31寸显示器)
          screenXXLMin: 2000 // XXL 最小值，必须大于 screenXLMax
        }
      }}
    >
      <Row className={classNames("bg-white", "px-20px", "pt-20px", "mb-8px", "box-border")}>
        <div className="flex-1">
          <Form form={form} colon={false}>
            <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40 }]}> {children}</Row>
          </Form>
        </div>
        <Col className="ml-18px flex justify-between">
          <Button onClick={onClear} className="mr-8px">
            重置
          </Button>
          <Button type="primary" onClick={onConfirm}>
            查询
          </Button>
        </Col>
      </Row>
    </ConfigProvider>
  )
}
export default forwardRef(Search)
